<template>
  <div class="MainContent">
    <div class="tong">
      <div class="advertisement">
        <div class="advertisementLeft">
          <img src="https://img.bosszhipin.com/static/file/2022/z8p71sj6ny1643173432685.png" alt="">
        </div>
        <div class="advertisementRight">
          <img src="https://static.zhipin.com/v2/web/geek/images/fast-reg-text.png" alt="">
          <input type="tel" placeholder="输入手机号">
          <span class="getSMS">
            <input type="text" placeholder="验证码">
            <a href="http://www.baidu.com">获取</a>
          </span>
          <button type="button" @click="goLogin">登录</button>
          <button type="button" @click="goRegister">注册</button>
        </div>
      </div>
    </div>
    <div class="search">
      <div class="searchTop">
        <div class="bor">
          <div class="searchLeft">
            <span>职位类型</span>
          </div>
          <input type="text" placeholder="搜索职位、公司">
          <button>搜索</button>
        </div>
      </div>
      <div class="searchButtom">
        <ul class="hotjob">
          热门职位：
          <li v-for="(item,idx) in host" :key="idx">{{item.HotPositionName}}</li>
        </ul>
      </div>
    </div>
    <!-- 二级和右边图 -->
    <div class="NavAndRotation">
      <div class="NavAnd"   @mouseleave="OutRenderLevel">
        <!-- 二级导航 -->
        <div class="NavAndLeft">
          <div class="NavAndLeftTop">
          <ul 
            @mouseenter="RenderLevel(item.title)" 
            v-for="(item,idx) in re"
            :key="idx"
            :title="item.title"
          >
            <p>{{item.title}}</p>
            <li 
              v-for="(val,i) in item.children" 
              :key="i"
              >
              {{val}}
              </li>
          </ul>
          </div>
          <div class="NavAndLeftButton">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="14"
              :page-size="7"
              @next-click="changePage" 
              @prev-click="changePagee"
          >
          <!-- num    // 分页 -->
          <!-- :total="count"  总数量   -->
          <!-- page-sizes   每页显示个数   -->
          </el-pagination>
          </div>
        </div>
        <!-- 右边图  显示或隐藏 -->
        <div class="NavAndRightwo" v-if="!isShow">
          <div>
            <h3>{{tit}}</h3>
            <div class="twoMenu" v-for="(item,idx) in shu" :key="idx">  
              <div class="twoMenuLeft">
                <span>{{item.title}}</span>
              </div>
              <div class="twoMenuRight">
                <span  v-for="(val,i) in item.children" :key="i">{{val}}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 右边图  显示或隐藏 -->
        <div class="NavAndRight" v-if="isShow">
          <div class="leftAll">
            <div class="laftTop">
              <img src="https://img.bosszhipin.com/beijin/upload/image/20191225/3f7fda0998317f22ec614bfc392848b9.jpg?x-oss-process=image/format,jpg" alt="">
            </div>
            <div class="laftButtom"><img src="https://img.bosszhipin.com/beijin/upload/image/20191225/35f18357bbff0625465bb716d94f336a.jpg?x-oss-process=image/format,jpg" alt=""></div>
          </div>
          <div class="rightAll">
            <div class="rightTop">
              <img src="https://img.bosszhipin.com/beijin/upload/image/20191225/719b5568228bda8229408e1401457f13.jpg?x-oss-process=image/format,jpg" alt="">
            </div>
            <div class="rightCenter">
              <img src="https://img.bosszhipin.com/beijin/upload/image/20191225/631e45e84ab482efaaf0a2bafb4d9219.jpg?x-oss-process=image/format,jpg" alt="">
            </div>
            <div class="rightButtom">
              <img src="https://img.bosszhipin.com/beijin/upload/image/20191225/f1ab4555112c48503c7fdd8712531102.jpg?x-oss-process=image/format,jpg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 热门职位 -->
    <div class="HotPosition">
      <div class="HotPositionContent">
        <div class="HotPositionTop">
          <h1>热招职位</h1>
        </div>
        <div class="HotPositionCenter">
          <ul>        
            <li v-for="(item,idx) in posNav" :key="idx" @click="changeNav(idx)">{{item.title}}</li>
          </ul>
        </div>
        <div class="HotPositionButtom">
          <div class="item" v-for="(item,idx) in companyDddress" :key="idx">
            <div class="itemTop">
              <p>{{item.jobDemands}}</p>
              <p>{{item.compensation}}薪</p>
            </div>
            <div class="itemCenter">
              <span>{{item.companyDddress}}</span>
              <span>{{item.experience}}</span>
              <span>{{item.education}}</span>
            </div>
            <div class="itemButtom">
              <img :src="item.Aimg" alt="">
              <p>{{item.companyName}}</p>
              <p><span>{{item.enterpriseService}}</span></p>
            </div>
          </div>
        </div>
        <div class="HotPositionButtomB">
          <div class="BTN">
            <input type="button" value="查看更多" @click="goPosition">
          </div>
        </div>
      </div>
    </div>
    <!-- 热门企业 -->
    <div class="HotPosition">
      <div class="HotPositionContent">
        <div class="HotPositionTop">
          <h1>热门企业</h1>
        </div>
        <div class="HotPositionButtom">
          <div class="item">
            <div class="itemTop">
              <p>暂无数据</p>
              <p>暂无数据</p>
            </div>
            <div class="itemCenter">
              <span>444</span>
              <span>555</span>
              <span>666</span>
            </div>
            <div class="itemButtom">
              <img src="" alt="">
              <p>111</p>
              <p><span>222</span></p>
            </div>
          </div>
        </div>
        <div class="HotPositionButtomB">
          <div class="BTN">
            <input type="button" value="查看更多"  @click="goCompany">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHomeOne } from '@/api'
import { getHomeHotposition } from '@/api'
import { getHomePositionCity } from '@/api'
import { getHomePositionCityNav } from '@/api'
export default {
  name: 'homePage',
  data() {
    return {
      msg: "这是职位",
      isShow:true,
      count:'',
      reOne:[],
      reTwo:[],
      re:[],
      qwe:[],
      shu:[],
      tit:"",
      host:[],
      companyDddress:[],
      posNav:[]
    }
  },
  created(){
    getHomePositionCityNav().then(res=>{
      // console.log(res.data)
      this.posNav=res.data
    })
    getHomeHotposition().then(res=>{
      this.host = res.data.data
      // console.log(this.host.HotPositionName)
    })
    this.getPageNum()
    // console.log(this.count)
    // 默认渲染九宫格
    getHomePositionCity().then(res=>{
      const com = res.data.data[0].district[0]
      this.companyDddress = com.children
      // console.log(res.data.data)
    })
  },
  methods: {
    RenderLevel(i){
      this.isShow=false
      // i为title
      getHomeOne().then(res=>{
        // 所有数据
        this.qwe=res.data.data
        // console.log(this.qwe)
        let index=""
        let flag = this.qwe.some((val,idx)=>{
          if(val.title == i){
            return index = idx
          }
        })
        // index为对应所有数据的索引
        // console.log(index)
        // console.log(this.qwe[index].title)
        this.getTwo(index)
      })
    },
    goLogin(){
      this.$router.push({
        path:'/login'
      })
    },
    goCompany(){
      this.$router.push({
        path:'/company'
      })
    },
    goPosition(){
      this.$router.push({
        path:'/position'
      })
    },
    goRegister(){
      this.$router.push({
        path:'/register'
      })
    },
    // 根据对应的索引渲染对应的耳机列表
    getTwo(i){
      this.tit=this.qwe[i].title
      // console.log(this.tit)
      this.shu=this.qwe[i].data
      // console.log(this.shu)
    },
    OutRenderLevel(){
      this.isShow=true
    },
    getPageNum(){
      getHomeOne().then(res=>{
        const re = res.data.data
        // 总条数  
        this.count = re.length
        this.reOne = re.slice(0,7)
        this.reTwo = re.slice(7,14)
        this.re = this.reOne
        // console.log(re)
      })
    },
    changeNav(i){
      // Nav对应的数字
      // console.log(i)
      getHomePositionCity().then((res)=>{
        const com = res.data.data[i].district[0]
        this.companyDddress = com.children
      })
    },
    changePagee(){
      this.re = this.reOne
    },
    changePage(){
      this.re = this.reTwo
    }
  }
}
</script>
<style lang="less">
.el-pagination{
  display:flex;
  margin-left:25%;  
  .number{
    height:28px
  }
}
.MainContent{
  background: #e1f2f4;
  .HotPosition{
    height: 800px;
    margin-bottom: 20px;
    box-sizing: border-box;
    .HotPositionContent{
      height: 100%;
      width: 70%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      margin-bottom: 300px;
      .HotPositionTop{
        height: 80px;
        h1{
          text-align: center;
          line-height: 80px;
        }
      }
      .HotPositionCenter{
        height: 62px;
        margin-bottom: 40px;
        padding: 10px;
        border-bottom: 1px solid #ccc;
        ul{
          display: flex;
          li{
            cursor: pointer;
            flex: 1;
            text-align: center;
            a{
              line-height: 40px;
              color: black;
              &:hover{
                color: #00d7c6;
              }
            }
          }
        }
      }
      .HotPositionButtom{
        flex: 1;
        // border: 1px solid black;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .item{
          border-radius: 10px;
          width: 30%;
          height: 30%;
          background: #fff;
          display: flex;
          flex-direction: column;
          .itemTop{
            padding: 10px;
            height: 30px;
            display: flex;
            font-size: 12px;
            p:nth-child(1){
              flex: 1;
            }
            p:nth-child(2){
              color: red;
              width: 35%;
            }
          }
          .itemCenter{
            padding: 10px;
            display: flex;
            margin: 10px 0;
            span{
              display: block;
              width: 40px;
              height: 20px;
              margin-left: 10px;
              background: #f8f8f8;
              border-radius: 5px;
              line-height: 20px;
              text-align: center;
              font-size: 12px;
            }
            span:nth-child(1){
              width:130px
            }
          }
          .itemButtom{
            height:80px;
            background: #eef0f5;
            display: flex;
            align-items: center;
            font-size: 10px;
            img{
              margin-left: 10px;
              width: 24px;
              height: 24px;
            }
            p:nth-child(2){
              margin-left: 10px;
              flex: 1;
            }
            p:nth-child(3){
              width: 50%;
              text-align: center;
            }
          }
        }
      }
      .HotPositionButtomB{
        height: 46px;
        width: 100%;
        .BTN{
          width: 20%;
          height: 100%;
          display:flex;
          align-items:center;
          margin:0 auto;
          input{
            cursor: pointer;
            border-radius: 10px;
            width:100%;
            height:100%;
            border:none;
            background: rgba(0,190,189,.1);
            color:#00a6a7
          }
        }
      }
    }
  }
  .NavAndRotation{
    width: 100%;
    height:350px;
    margin-bottom: 20px;
    .NavAnd{
      width:60%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      .NavAndLeft{
        background: #fff;
        // border:1px solid black;
        height: 100%;
        width: 35%;
        border-radius: 10px;
        padding: 10px;
        box-sizing: border-box;
        .NavAndLeftTop{
          height: 92%;
          width:100%;
          ul{
            box-sizing: border-box;
            overflow: hidden;
            &:hover{
              border-radius: 10px;
              transition: all 0.8s linear;
              border: 1px dotted transparent;
            }
            display: flex;
            align-items: center;
            height: 40px;
            line-height: 40px;
            font-size: 10px;
            p{
              font-size: 16px;
              font-weight: bold;
              display: block;
              max-width: 120px;
              min-width: 40px;
              margin-right: 10px;
              text-align: center;
            }
            li{
              text-align: center;
              flex: 1;
              height: 40px;
              line-height: 40px;
            }
          }
        }
        .NavAndLeftButton{
          margin:0 auto;
          flex:1;
          width:100%
        }
      }
      .NavAndRightwo{
        overflow:auto;
        // overflow: scroll;
        
        padding: 30px;
        margin-left: 20px;
        border-radius: 10px;
        background: #fff;
        flex: 1;
        h3{
          margin-bottom: 20px;
        }
        .twoMenu{
          width: 100%;
          display: flex;
          font-size: 12px;
          margin-bottom: 10px;
          .twoMenuLeft{
            flex: 1;
          }
          .twoMenuRight{
            width: 80%;
            border-bottom: 1px solid #ccc;
            span{
              font-size: 12px;
              line-height: 20px;
              float: left;
              display: block;
              flex-shrink: 0;
              margin-left: 20px;
            }
          }
        }
      }
      .NavAndRight{
        margin-left: 40px;
        flex: 1;
        display: flex;
        .leftAll{
          width: 60%;
          height: 100%;
          div{
            img{
              width: 100%;
              height: 100%;
            }
          }
          // border: 1px solid;
          .laftTop{
            height: 66%;
            width: 100%;
            margin-bottom: 6px;
          }
          .laftButtom{
            width: 100%;
            height: 32%;
          }
        
        }
        .rightAll{
          margin-left: 4px;
          width: 40%;
          height: 100%;
          // border: 1px solid red;
          .rightTop{
            height: 33%;
          }
          .rightCenter{
            height: 33%;
          }
          .rightButtom{
            height: 34%;
          }
          div{
            margin-top: 2px;
          }
        }
      }
    }
  }
  
  .tong{
    width: 100%;
    height: 120px;
    background: linear-gradient(90deg,#00bebd 0,#00a6a7 100%);
    .advertisement{
      height: 100%;
      width:1200px;
      margin: 0 auto;
      // background-color: red;
      display: flex;
      .advertisementLeft{
        // background-color: red;
        flex: 1;
        img{
          width:69%;
          margin-left: 40px;
        }
      }
      .advertisementRight{
        // background-color: yellow;
        flex: 1;
        .getSMS{
          position: relative;
          a{
            color: #54cbc4;
            font-size: 12px;
            position: absolute;
            right: 20px;
            top: 0px;
          }
        }
        img{
          margin-top: 20px;
          margin-bottom: 20px;
          width: 255px;
        }
        input{
          width: 140px;
          border-radius: 8px;
          background: rgba(255,255,255,.8);
          padding: 6px 10px 5px 10px;
          border:none;
          margin-right: 10px;
          height: 23px;
        }
        button{
          background: 0 0;
          border-radius: 8px;
          width: 10%;
          color: #fff;
          text-align: center;
          cursor: pointer;
          height: 34px;
          line-height: 34px;
          border: 1px solid #fff;
          margin-left: 10px;
        }
      }
    }
  }
  .search{
    width: 1000px;
    margin: 20px auto;
    height: 140px;
    display: flex;
    flex-direction: column;
    .searchTop{
      // background: #00d7c6;
      padding: 20px;
      margin: 0 auto;
      flex: 1;
      display: flex;
      align-items: center;
      input{
        width: 700px;
        height: 44px;
        border: none;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        outline: 0;
      }
      .bor{
        font-size: 18px;
        display: flex;
        align-items: center;
        height: 46px;
        background: #00bebd;
        border: 3px solid #00bebd;
        border-radius: 5px;
        button{
          width: 120px;
          background: #00bebd;
          border-radius: 0 10px 10px 0;
          line-height: 46px;
          border: none;
          cursor: pointer;
        }
        .searchLeft{
          span{
            background: #fff;
            line-height: 46px;
            text-align: center;
            display: block;
            width: 100px;
            cursor: pointer;
          }
        }
      }
    }
    .searchButtom{
      height: 48px;
      .hotjob{
        height: 100%;
        width: 900px;
        margin: 0px auto;
        display: flex;
        align-items: center;
        li{
          margin-left: 4px;
          padding:0 4px;
          background: rgba(255,255,255,0.5);
          border-radius: 6px;
          color: #00a6a7;
          font-size: 14px;
          line-height: 20px;
        }
      }

    }
  }
}
</style>